<template>
    <div>
        <Editor id="tinymce" v-model="tinymceHtml" @onChange="contentChange" :init="editorInit"></Editor>
        <el-dialog title="上传图片" :visible.sync="imageUploadVisible">
            <Upload show-type="avatar" accept-type="image" :limit="1" :exist="useToClear" :file-list="uploadedList" v-on:upload-change="imageUploaded"></Upload>
        </el-dialog>
        <el-dialog title="上传媒体" :visible.sync="mediaUploadVisible">
            <Upload show-type="text" :show-file-list="true" accept-type="media" :limit="1" :file-list="uploadedList" v-on:upload-change="mediaUploaded">
                <div slot="tip">只能上传 *.mp3/*.mp4 文件</div>
            </Upload>
        </el-dialog>
    </div>
</template>

<script>
    // import { getRandomCharacters } from '@/assets/util.js'
    import tinymce from 'tinymce/tinymce'
    import 'tinymce/themes/modern/theme'
    import Editor from '@tinymce/tinymce-vue'
    import 'tinymce/plugins/image'
    import 'tinymce/plugins/link'
    import 'tinymce/plugins/code'
    import 'tinymce/plugins/table'
    import 'tinymce/plugins/lists'
    import 'tinymce/plugins/contextmenu'
    import 'tinymce/plugins/wordcount'
    import 'tinymce/plugins/textcolor'
    import 'tinymce/plugins/preview'
    import 'tinymce/plugins/media'

    import Upload from '@/components/Upload'
    export default {
        name: "TinymceEditor",
        components: {
            Editor,
            Upload
        },
        model: {
            prop: 'html',
            event: 'change'
        },
        props: ['html'],
        data() {
            return {
                imageUploadVisible: false,
                mediaUploadVisible: false,
                tinymceHtml: this.html,
                uploadedList : [],
                useToClear: '',
                editorInit: {
                    language_url: process.env.BASE_URL + 'tinymce/zh_CN.js',
                    language: 'zh_CN',
                    skin_url: process.env.BASE_URL + 'tinymce/skins/lightgray',
                    height: 300,
                    plugins: 'link lists image table textcolor wordcount contextmenu preview media',
                    toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist  blockquote | link unlink image media | removeformat preview',
                    branding: false,
                    plugin_preview_width: 414,
                    plugin_preview_height: 667,
                    file_picker_types: 'image media',
                    file_picker_callback: function(callback, value, meta) {
                        // Provide image and alt text for the image dialog
                        this.uploadedList = []
                        if(meta.filetype === 'image'){
                            this.imageUploadVisible = true
                        } else {
                            this.mediaUploadVisible = true
                        }
                    }.bind(this)
                }
            }
        },
        watch: {
            // 'defaultHtml': function(v){
            //     console.log('defaultHtml',v)
            //     this.tinymceHtml = v
            // }
        },
        mounted() {
            tinymce.init({})
        },
        methods: {
            contentChange(v) {
                this.$emit('change', this.tinymceHtml)
            },
            hideNativeUploadDIalog(type){
                let dialog = `[aria-label="Insert/edit ${type}"].mce-window`
                let tinyPop = window.document.querySelectorAll(dialog)[0]
                let tinyPopBack = window.document.querySelector('#mce-modal-block')
                tinyPop.parentNode.removeChild(tinyPop)
                tinyPopBack && tinyPopBack.parentNode.removeChild(tinyPopBack)
            },
            imageUploaded(url){
                this.tinymceHtml = this.tinymceHtml + `<img width="300" src="${url}">`
                this.$emit('change', this.tinymceHtml)
                this.hideNativeUploadDIalog('image')
                this.imageUploadVisible = false
                this.useToClear='1'
                this.$nextTick(function(){
                    this.useToClear=''
                })
            },
            mediaUploaded(url) {
                let nameArg = url.split('.'),
                    fileExt = nameArg.length > 1 ? nameArg[nameArg.length - 1] : ''
                if(fileExt.toUpperCase() === 'MP3'){
                    // TODO: 添加自定义播放器
                    // let id = 'audio_'+getRandomCharacters(6)
                    this.tinymceHtml = this.tinymceHtml + `<audio src="${url}"  controls="controls"></audio>`
                } else {
                    this.tinymceHtml = this.tinymceHtml + `<video controls="controls" width="100%"> <source src="${url}" type="video/mp4" /></video>`
                }
                this.$emit('change', this.tinymceHtml)
                this.hideNativeUploadDIalog('media')
                this.mediaUploadVisible = false
                
            }
        }
    }
</script>

<style scoped>
    .el-dialog__wrapper{
        z-index: 9999999!important;
    }
    
</style>
<style lang="scss">
.mce-container .mce-tabs{
        visibility: hidden;
    }
</style>
